import React, { Component } from 'react';
//本地图片必须import导入, 才能使用
import { Image} from 'antd-mobile'

import '../../styles/classifyList.scss'

class List extends Component {
    constructor(props){
        super(props);
        this.state = {} //定义组件状态
    }
    render() {
        return (
            <div className='list'>
                {
                    // 列表渲染, 使用js中的map函数
                    this.props.list.map((item, index) => {
                        // console.log(this.props.list);
                        return (
                            <div className="cate" key={index}>
                                <div className='pic'>
                                    <Image src={item.pic}  width={50} height={50}   style={{ borderRadius: 25 }}/>

                                </div>
                                <div className="name"> {item.name} </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default List;